<template>
<el-container>
  <el-header>
    <doreminav></doreminav>
  </el-header>
  <el-container>
    <el-aside :width=asideWidth>
        <doremiuntree @func="getUntree"></doremiuntree>
    </el-aside>
    <el-main>
      <keep-alive>
        <doremIframe :msg=treeData></doremIframe>
      </keep-alive>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
  import nav from "../components/doremi/NavMunu"
  // import untree from "../demo/elTree"
  import untree from "../components/doremi/lazyEltree"
  import iframe from "../components/doremi/iframe"
  export default {
    components:{
      doreminav:nav,
      doremIframe:iframe,
      doremiuntree:untree
    },
    data() {
      return{
        treeData:{},
        asideWidth:"300px"
      }

    },
    created(){

    },
    methods:{
      getUntree(data){
        this.treeData=data
        // console.log("index"+data.id)
      },
      changeAside() {
        this.asideWidth = '400px'  //修改成功，这种方式相当于直接修改html上的值，会重新渲染
      }
      
    },
    mounted () {

    },
  }
</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    padding:0;
  }
  
  .el-aside {
    /* background-color: #D3DCE6; */
    color: #333;
    text-align: center;
  }
  
  .el-main {
    color: #333;
    text-align: center;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  #iframeContain{
  background: yellowgreen;
  width: 100%;
  height: 800px;
}
</style>



